<template>
  <div>
    <el-cascader
      v-model="currentValue"
      :disabled="disabled"
      :options="optionList"
      :props="props"
      clearable
      show-all-levels
      filterable
      placeholder="选择地区"
      @active-item-change="handleItemChange"
      @change="change"
    ></el-cascader>
  </div>
</template>

<script>
import { getAreaParentsAndSiblings, getAreaChildren } from "@/api/area";
import abp from 'abp'
const areaRootAreaCode = abp.setting.get("Area.RootAreaCode");

export default {
  name: "AreaCascader",
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      currentValue: undefined, // 分析情况 手动赋值
      items: [],
      props: {
        value: "id",
        label: "displayName",
        children: "children"
      }
    };
  },
  computed: {
    optionList() {
      const optionList = this.items.filter(m => m.parentId === areaRootAreaCode);
      this.buildOptionList(optionList);
      return optionList;
    }
  },
  watch: {
    value(newValue) {
      this.load();
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    // 将items处理成级联需要的数据
    buildOptionList(parentList) {
      parentList.forEach(m => {
        if (!m.isLeaf) {
          const nodes = this.items.filter(z => z.parentId === m.id);
          m.children = [...nodes];
          this.buildOptionList(m.children);
        }
      });
    },
    // 需要在合适的地方调用赋值，比如请求回调里
    setCurrentValue() {
      const id = this.value;
      const result = this.getCurrentValueToArray(id, []);
      this.currentValue = result;
    },
    getCurrentValueToArray(id, arr) {
      if (id === areaRootAreaCode) {
        return arr;
      }
      var item = this.items && this.items.find(i => i.id === id);
      if (item && item.id) {
        arr.unshift(item.id);
        this.getCurrentValueToArray(item.parentId, arr);
      }
      return arr;
    },
    change(val) {
      var result = "";
      if (val && val.length > 0) {
        result = val[val.length - 1];
      } else {
        result = "";
      }
      this.$emit("input", result);
    },
    load() {
      // value传进来的是最终地址，currentValue是进行数组化的值
      if (this.value) {
        // 这个值如果已存在在items里，说明相应的数据已经加载过了，无法请求服务器
        if (this.items.filter(i => i.id === this.value).length > 0) {
          this.setCurrentValue();
          return;
        }

        getAreaParentsAndSiblings(this.value).then(result => {
          if (result && result.length > 0) {
            result.forEach(items => {
              items.forEach(item => {
                if (this.items.filter(i => i.id === item.id).length === 0) {
                  this.items.push(item);
                }
              });
            });
          }

          this.setCurrentValue();
        });
      } else {
        this.loadData(areaRootAreaCode);
      }
    },
    loadData(parentId) {
      // 已经加载过的无需加载，不考虑后台主动更新问题
      if (this.items.filter(i => i.parentId === parentId).length > 0) {
        return;
      }

      getAreaChildren(parentId).then(result => {
        if (result && result.length > 0) {
          result.forEach(element => {
            if (this.items.filter(i => i.id === element.id).length === 0) {
              this.items.push(element);
            }
          });
        }
      });
    },
    handleItemChange(val) {
      let parentId = areaRootAreaCode;
      // 获取点击的地区
      if (val && val.length > 0) {
        parentId = val[val.length - 1];
      }
      this.loadData(parentId);
    }
  }
};
</script>
